<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="菜鸟开发小组" />
		<meta name="keywords" content="Hyper IT,hyper it,it,hyper,IT 博客,博客,交流平台,IT交流网站,IT服务网站,菜鸟开发小组"/>
		<meta name="description" content="由菜鸟才发小组开发的一个苛求质量的高大上的IT服务网站，为IT技术圈内的大牛与小白提供了一个良好的技术交流平台。"/>
		<meta name="robots" content="all"/>
		<title>Hyper IT</title>
		 
		 <link rel="icon" href="img/logo2.ico" type="image/x-icon"/>
		 <link rel="stylesheet" type="text/css" href="css/common.css"/>
		 <link rel="stylesheet" type="text/css" href="css/blogDetail.css"/>
		 
		 <style>
		 	details summary::-webkit-details-marker { display:none; }
		 </style>
	</head>
	<body>
		<header>
			<div class="wrap">
				<div class="logo">
					<a href="index.html"><img src="img/logo.jpg" width="180" height="50"/></a>
				</div>
			</div>
		</header>
		<div class="main">
			<div class="wrap">
				<aside>
					<details open="open">
						<summary>用户管理</summary>
							<ul>
								<li><a href="allUsers.html">查看所有用户</a></li>
							</ul>
					</details>
					<details open="open">
						<summary>博文管理</summary>
							<ul>
								<li><a href="checkBlog.html" class="active">查看博文</a></li>
								<li><a href="checkNote.html">查看随笔</a></li>
							</ul>
					</details>
					<details open="open">
						<summary>商城管理</summary>
							<ul>
								<li><a href="goodsList.html">查看商品列表</a></li>
								<li><a href="newGoods.html">商品上新</a></li>
								<li><a href="order.html">订单详情</a></li>
							</ul>
					</details>
					<details open="open">
						<summary>职位管理</summary>
							<ul>
								<li><a href="position.html" >查看职位</a></li>
							</ul>
					</details>
					<details open="open">
						<summary>标签管理</summary>
							<ul>
								<li><a href="tag.html">查看标签</a></li>
							</ul>
					</details>
					<details open="open">
						<summary>信息管理</summary>
							<ul>
								<li><a href="infoCenter.html">举报中心</a></li>
							</ul>
					</details>
				</aside>
				<section>
					<div class="title">
						<span onclick="javascript :history.back(-1);">返 回</span>
					</div>
					<div class="blog_title"></div>
					<div class="info">
						阅读量：<span id="reading"></span>&nbsp;&nbsp;收藏量<span id="collecting"></span>&nbsp;&nbsp;
						打赏：<span id="reward"></span>
						作者：<span id="name"> </span><span id="createtime"></span>
					</div>
					<div class="label"></div>
					<div class="article_info"></div>
					<div class="content"></div>
					<div class="title" style="background-color: #C0C0C0;margin-top: 40px;"><span>评 论</span></div>
					<div class="allComment">
						<ul id="commentList">
						</ul>
					</div>
					<div class="getMore" onclick="getMoreArticleComment()">加载更多...</div>
				</section>
			</div>
		</div>
		<footer>
			<div class="wrap">
				<p>Copyright &copy; 2017-5-5 Hyper IT of 菜鸟开发小组 All Rights Reserved.</p>
			</div>
		</footer>
		
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function(){
				initArticle();
				initArticleComment();
			});
			function initArticle(){
				var userDetail_id = window.location.href.split('&')[0].split('=')[1];
				var article_id = window.location.href.split('&')[1].split('=')[1];
				var url = '/HyperIT/article/getOneArticle';
				var parm = 'article_id='+article_id+'&userdetail_id='+userDetail_id;
				$.get(url,parm,function(data){
					if(data.serviceResult){
						$(".blog_title").html(data.resultParm.article.title);
						$(".article_info").html("摘要："+data.resultParm.article.info)
						$("#name").html(data.resultParm.user.name);
						$("#createtime").html(data.resultParm.article.createtime.split(".")[0]);
						$(".content").html("正文:<br />"+data.resultParm.article.content_html)
						$("#reading").html(data.resultParm.article.reading);
						$("#collecting").html(data.resultParm.article.collecting);
						$("#reward").html(data.resultParm.article.reward);
						var tagList = data.resultParm.tag;
						for(var i= 0 ;i<tagList.length;i++){
							$(".label").append('<span>'+tagList[i].name+'</span>')
						}
					}
					else{
						alert(data.resultInfo);
					}
				})
			}
			//获取文章评论
			function getArticleComment(index){
				var article_id = window.location.href.split('&')[1].split('=')[1];
				var url = "/HyperIT/blog/getComment";
				var parm = "size=4&indexPageNum="+index+"&target_id="+article_id+"&type=0";
				$.get(url,parm,function(data){
					if (data.serviceResult) {
						var commentList = data.resultParm.getcomment;
						showArticleComment(commentList);
						commentIndex++;
					} 
					else{
					if (commentIndex==1) {
						return;
						} 
					else{
						alert(data.resultInfo);
						}
					}
				});
			}
				//绘制comment
				function showArticleComment(commentList){
					for(var i = 0;i<commentList.length; i++){
						$("#commentList").append('<li id="'+commentList[i].comment.id+'"><div class="user_head">'+
							'<img src="../'+commentList[i].userdetail.head+'" width="80" height="80"/></div>'+
								'<div class="detail_info">'+
									'<div class="user_name">'+
										'<span id="comment_name">'+commentList[i].userdetail.name+'</span>'+
										'<span id="comment_time">'+commentList[i].comment.createtime.substr(0,16)+'</span></div>'+
									'<div class="comment">'+commentList[i].comment.content+'</div></div></li>');
					}
				}
				//初始化comment
				function initArticleComment(){
//					$("").children("").remove();
					commentIndex = 1;
					getArticleComment(commentIndex);
				}
				function getMoreArticleComment(){
					getArticleComment(commentIndex);
				}

		</script>
	</body>
</html>
